<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{user.manage}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryUserInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.dep}]]*/"",name : 'branchName',width : _columnWidth, sortable : true,align : 'center'}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            query();

            $("#query-btn-id").click(function (evnt) {
                evnt.stopPropagation();
                query();

            });

            $("#allocate-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            // $( this ).dialog( "close" );
                            var userUuid = $("#user-ztree-list-id").attr("userUuid");
                            var userArray = [];
                            console.info(userUuid)

                            var ztreeObj = $.fn.zTree.getZTreeObj("user-ztree-list-id");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var menuArray = [];
                            $(checkNodes).each(function (index,item) {
                                userArray.push(item.id);
                            });

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{saveUserIdAndRoleId}]]*/'',
                                data: [{name:"userUuid",value:userUuid},
                                    {name:"userArray",value:userArray}],
                                success: function (data) {
                                    $("#allocate-role-dialog-id").dialog('close');
                                    message(data.msg);
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }

                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation()
                // $("#allocate-user-dialog-id").dialog('open');
                allocateRoleTree();
            })

            $("#add-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {

                            var flag = $("#add-user-form-id input.form-control").verification({});
                            if(!flag){
                                return;
                            }
                            $("#add-user-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#add-btn-id").click(function (event) {
                event.stopPropagation()
                $("#add-user-dialog-id").dialog('open')
            })

            $("#add-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-role-form-id").resetForm();
                    $("#add-user-dialog-id").dialog('close');
                    query()
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            $("#modify-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.modify}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {

                            var flag = $("#modify-user-dialog-id input.form-control").verification({});
                            if(!flag){
                                return;
                            }
                            $("#modify-user-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#modify-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#modify-user-dialog-id").dialog('close');
                    query()
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });

            $("#delete-btn-id").click(function (event) {
                event.stopPropagation();
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
                if(ids.length == 0){
                    message(/*[[#{common.select.more}]]*/'');
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{deleteUserById}]]*/'',
                    data: [{name:"userUuidArray",value:ids}],
                    success: function (data) {
                        // console.info(data)
                        message(data.msg);
                        query();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            })


            $("#unlock-btn-id").click(function (event) {
                event.stopPropagation();
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
                if(ids.length == 0){
                    message(/*[[#{common.select.more}]]*/'');
                    return;
                }
                if(ids.length > 1){
                    message(/*[[#{common.select.one}]]*/'');
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{unlockUserById}]]*/'',
                    data: [{name:"userUuidArray",value:ids}],
                    success: function (data) {
                        // console.info(data)
                        message(data.msg);
                        query();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            })
// 切换部门
            $("#allocate-dep-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.dep.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid =  $("#allocate-dep-tree-id").attr("userUuid");
                            var depIds= [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-dep-tree-id");
                            var checkNodes = ztreeObj.getCheckedNodes(true);
                            var depArray = [];
                            $(checkNodes).each(function (index,item) {
                                depIds.push(item.id);
                            });

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{saveUserDep}]]*/'',
                                data: [
                                    {name:"userUuid",value:userUuid},
                                    {name:"depIds",value:depIds}
                                ],
                                success: function (data) {
                                    message(data.msg);
                                    $("#allocate-dep-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });



                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allocate-dep-id").click(function (event) {
                event.stopPropagation()
                // $("#allocate-auth-dialog-id").dialog('open')
                allocateDep();
            })

        });//ready

        function query() {
            var userNameId = $("#user-name-id").val();
            var mobileId = $("#user-mobile-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"userName",value:userNameId},
                    {name:"mobile",value:mobileId}
                ]
            }).flexReload();

        }

        var allocateSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };


        function allocateRoleTree() {
            var ids =  $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length != 1){
                message(/*[[#{common.select.one}]]*/)
                return
            }
            $("#role-ztree-list-id").attr("userUuid",ids);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{allocateRoleTree}]]*/'',
                data: [{name:"userUuid",value:ids}],
                success: function (data) {
                    // console.info(data)
                    $.fn.zTree.init($("#role-ztree-list-id"), allocateSetting, data);
                    $("#allocate-role-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }
        function rowDbclick(r) {
            console.info(r);
            $(r).dblclick(function (event) {
                event.stopPropagation();
                var cl = $(this).attr("ch").split("_FG$SP_");
                $("#modify-user-uuid").val(cl[0]);
                $("#modify-user-name-id").val(cl[2]);
                $("#modify-user-nickname-id").val(cl[5]);
                $("#modify-user-mobile-id").val(cl[4]);
                $("#modify-user-email-id").val(cl[3]);
                $("#modify-user-dialog-id").dialog('open')
            });
        }

        var allocateSetting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        function allocateDep() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            $("#allocate-dep-tree-id").attr("userUuid",ids);
            //console.info("roleId:" + ids)
            if(ids.length != 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryDepTree}]]*/'',
                data: [{name:"userUuid",value:ids}],
                success: function (data) {
                    // console.info(data)
                    $.fn.zTree.init($("#allocate-dep-tree-id"), allocateSetting, data);
                    $("#allocate-dep-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });

        }
    </script>
    <style>
        body{
            background-color: #E6E6FA
        }
    </style>
</head>
<body>
<nav style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
    <div sec:authorize="hasRole('ROLE_gqgy_data_user_query')">
        <span th:text="#{user.name}"></span>
        <input  style="margin-left: 10px;" id="user-name-id">
        <span style="margin-left: 10px;" th:text="#{user.mobile}"></span>
        <input  style="margin-left: 10px;" id="user-mobile-id">
        <a id="query-btn-id" class="navbar-btn" href="#" style="margin-left: 10px" >
            <i class="glyphicon glyphicon-zoom-in"></i>
            <span th:text="#{common.query}"></span>
        </a>
    </div>
    <a id="allocate-btn-id" class="navbar-btn" href="#" style="margin-left: 10px" >
        <i class="glyphicon glyphicon-leaf"></i>
         <span th:text="#{user.role.allocate}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_gqgy_data_user_allow')" id="add-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_gqgy_data_user_delete')" id="delete-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-trash"></i>
        <span th:text="#{common.delete}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_gqgy_data_user_delete')" id="unlock-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-paperclip"></i>
        <span th:text="#{user.unlock}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_gqgy_user_dep_allow')" id="allocate-dep-id" href="#" class="navbar-btn" style="margin-left: 10px">
        <i class="glyphicon glyphicon-random"></i>
        <span th:text="#{user.dep.allocate}"></span>
    </a>

</nav>

<table sec:authorize="hasRole('ROLE_gqgy_data_user_query')" id="flexigrid-id"></table>
<div id="allocate-role-dialog-id" style="display: none">
    <ul id="role-ztree-list-id" class="ztree">

    </ul>
</div>
<div id="add-user-dialog-id" style="display: none">
    <form id="add-user-form-id" th:action="@{addUserInfo}" method="post">
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input class="form-control" id="add-user-name-id" type="text" name="userName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.nickname}"></span>
            <input class="form-control" id="add-user-nickname-id" type="text" name="niceName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input class="form-control" id="add-user-mobile-id" type="text" name="mobile" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input class="form-control" id="add-role-email-id" type="text" name="email" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.password}"></span>
            <input class="form-control" id="add-role-password-id" type="text" name="password" reg="^.{1,20}$">
        </div>
    </form>
</div>
<div  id="modify-user-dialog-id" style="display: none">
    <form id="modify-user-form-id" th:action="@{modifyUserInfo}" method="post">
        <input type="hidden" name="userUuid" id="modify-user-uuid">
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input class="form-control" id="modify-user-name-id" type="text" name="userName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.nickname}"></span>
            <input class="form-control" id="modify-user-nickname-id" type="text" name="niceName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input class="form-control" id="modify-user-mobile-id" type="text" name="mobile" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input class="form-control" id="modify-user-email-id" type="text" name="email" reg="^.{1,20}$">
        </div>
    </form>

</div>


<div sec:authorize="hasRole('ROLE_gqgy_user_dep_allow')" id="allocate-dep-dialog-id" style="display: none">
    <ul id="allocate-dep-tree-id" class="ztree"></ul>
</div>


</body>
</html>